<%--
  Created by IntelliJ IDEA.
  User: DELL
  Date: 2025/11/5
  Time: 08:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>员工列表</title>
    <style>
        h1 {
            text-align: center;
        }

        .searchDIV {
            margin: 5px;
            display: flex;
            justify-content: end;
        }

        table {
            text-align: center;
        }
    </style>
</head>
<body>
<h1>员工列表</h1>
<div class="searchDIV">
    <h1>添加员工</h1>
    <div>
        <a href="addEmp.jsp" methods="post"></a>
    </div>
    <div>
        <input type="text" placeholder="请输入员工姓名" id = "searchName">
        <button onclick="searchEmpName()">查询</button>
    </div>
</div>
<div>
    <table width="100%">
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>职位</th>
            <th>入职时间</th>
            <th>入职时间</th>
            <th>联系电话</th>
            <th>生日</th>
            <th>操作</th>
        </tr>
        <tbody id = "emp"></tbody>
    </table>
</div>
</body>
</html>
<script src="web/js/jquery.js"></script>
<script>
    //页面加载完成
    $(function () {
        // 获取员工列表
        getEmployeeList(null);
    })

    function getEmployeeList(empName) {
        $.ajax({
            uri: ${pageContext.request.contextPath},
            type: "get",
            data: {
                method: "list",
                empName: empName
            },
            dataType: "json",
            success: function (data) {
                console.log("员工列表", data);
                $("#emp").empty();
                for(const emp of data) {
                    const tr =  `
                        <tr>

                            <td>`+emp.id || ''+`</td> <!-- 容错：若字段不存在显示空字符串 -->
                            <td>`+emp.name || ''+`</td>
                            <td>`+emp. || ''+`</td>
                            <td>`+emp.name || ''+`</td>
                            <td>`+emp.name || ''+`</td> <!-- 部门字段，需与后端返回字段匹配 -->
                            <td>`+emp.name || ''+`</td>
                            <td>`+emp.name || ''+`</td>
                        </tr>
                    `;
                    $("#emp").append(tr); // 追加到 tbody
                }
            }
        })
    }
    //根据员工姓名查询员工列表
    function searchEmpName(){
        //获取输入框中的员工姓名
        let empName = $("#searchName").val()
        getEmployeeList(empName);
    }
</script>